<template>
  <div class="app-container">
    <el-form class="orderSerach" label-width="80px">
      <el-form-item :label="$t('order.createTime')">
        <el-date-picker
          v-model="choosedTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item :label="$t('order.orderId')">
        <el-input />
      </el-form-item>
      <el-form-item :label="$t('order.productTemplate')">
        <el-select v-model="templateValue" clearable @change="handleSelect">
          <el-option
            v-for="item in templateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain>{{ $t('order.searchBtn') }}</el-button>
      </el-form-item>
    </el-form>
    <tab
      :tab-map-options="tabMapOptions"
      :table-label="tableLabel"
      :table-data="tableData"
      :list-query="listQuery"
    />
  </div>
</template>

<script>
import Tab from '@/views/tab/index'
export default {
  name: 'Order',
  components: {
    Tab
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      choosedTime: '',
      tabMapOptions: [
        {
          label: this.$t('order.all'),
          key: 'All'
        },
        {
          label: this.$t('order.paying'),
          key: 'pay'
        },
        {
          label: this.$t('order.auditing'),
          key: 'audit'
        },
        {
          label: this.$t('order.passAudit'),
          key: 'pass'
        },
        {
          label: this.$t('order.rejectAudit'),
          key: 'reject'
        },
        {
          label: this.$t('order.waitCard'),
          key: 'makeCard'
        },
        {
          label: this.$t('order.waitDelevery'),
          key: 'delevery'
        },
        {
          label: this.$t('order.deleveryed'),
          key: 'deleveryed'
        },
        {
          label: this.$t('order.done'),
          key: 'done'
        },
        {
          label: this.$t('order.cancle'),
          key: 'cancle'
        },
        {
          label: this.$t('order.handUp'),
          key: 'handup'
        }
      ],
      tableLabel: [
        {
          label: this.$t('order.orderId'),
          key: 'orderId'
        },
        {
          label: this.$t('order.productName'),
          key: 'productName'
        },
        {
          label: this.$t('order.productPrice'),
          key: 'productPrice'
        },
        {
          label: this.$t('order.resultPay'),
          key: 'resultPay'
        },
        {
          label: this.$t('order.orderStatus'),
          key: 'orderStatus'
        },
        {
          label: this.$t('order.createTime'),
          key: 'createTime'
        },
        {
          label: this.$t('tab.oprate'),
          key: 'opration',
          type: 'order'
        }
      ],
      tableData: [
        {
          orderId: 12,
          productName: 33,
          productPrice: 33,
          resultPay: 33,
          orderStatus: 33,
          createTime: 33
        }
      ],
      listQuery: {
        total: 0,
        limit: 20,
        page: 1
      },
      templateList: [
        {
          label: 900,
          value: 0
        }
      ],
      templateValue: ''
    }
  },
  methods: {
    handleSelect() {
      1
    }
  }
}
</script>

<style>
.label {
  display: inline-block;
  width: 80px;
}
.orderSerach .el-form-item__label {
  font-weight: normal;
}
.orderSerach .el-form-item {
  display: inline-block;
}
</style>
